<template>
  <div>
    <div class="regTop">
      <van-nav-bar title="注册" left-arrow @click-left="$router.back()"/>
    </div>
    <div class="reg-main">
      <!-- <van-cell-group> -->
      <van-form @submit="onSubmit">
        <van-field
       
          v-model="username"
          name="username"
          
          placeholder="请输入手机号"
          :rules="[{ required: true, message: '请填写用户名' }]"
        > <template class="icon" #left-icon >
         <img src="../assets/shouji.png" alt="">
          </template></van-field>

          
        <van-field
          v-model="vercode"
          name="vercode"
          center
          clearable
       
          placeholder="请输入验证码"
        >
          <template #button>
            <van-button size="small" round type="primary" native-type="button" @click="getsendSms">发送验证码</van-button>
            <!-- <van-button size="small" round color="#ccc" type="primary" native-type="button"
            @click="getsendSms"
              >发送验证码</van-button
            > -->
          </template>
           <template class="icon" #left-icon >
         <img src="../assets/suo.png" >
          </template>
        </van-field>
        <van-field
          v-model="password"
          name="password"
        
          placeholder="请设置密码"
          :rules="[{ required: true, message: '请设置密码' }]"
        />

        <div style="margin: 16px">
          <van-button
            round
            block
            type="info"
            color="rgb(7,193,96)"
            native-type="submit"
            >登录</van-button
          >
        </div>
      </van-form>
      <!-- </van-cell-group> -->
    </div>
  </div>
</template>

<script>
import { NavBar, Field, Button, Form } from "vant";

import{reg}from "@/api/user.js"
export default {
  data() {
    return {
      username: "",
      password: "",
      vercode:''
    };
  },
  components: {
    [NavBar.name]: NavBar,
    [Field.name]: Field,
    [Button.name]: Button,
    [Form.name]: Form,
  },
  created() {
    // this.getReg()
  },
  methods: {
    onSubmit(values) {
      let username = this.username;
      let password = this.password;
      let vercode = this.vercode;
      console.log(typeof username);
      console.log("submit", values);

      this.$http
        .post("/user/reg", {
          username,
          password,
          vercode,
        })
        .then((res) => {
          console.log(res);
          if (res.code==0) {
            this.$toast('注册成功即将跳转到登陆页面')
            let { token, tokenExpired, uid } = res;
          localStorage.setItem("tt-token", token);
          localStorage.setItem("tt-tokenExpired", tokenExpired);
          localStorage.setItem("tt-uid", uid);
            setTimeout(() => {
              this.$router.push('login')
            }, 2000);
          }else{
            $this.$toast(res.msg||'注册失败')
          }
        });
    },
    getsendSms() {
      let mobile = this.username;
      this.$http
        .post("/user/sendSms", {
          mobile,
          type: "register",
        })
        .then((res) => {
          console.log(res);
        });
    },
  },
};
</script>

<style lang="scss" lang="less" scoped>
.reg-main{
  img{
    width: 15px;
  }
 
}
::v-deep  .van-field__left-icon{
  display: flex;
  align-items: center;
}
</style>